<template>
  <header class="main-header">
    <mod-sensitive login>
      <div>
        <button class="nav-toggle" type="button" @click.prevent="onClickShowBtn">
          <span class="sr-only">Toggle navigation</span>
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </mod-sensitive>
    <mod-container>
      <mod-main-user-info :todos="todos"></mod-main-user-info>
    </mod-container>
  </header>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import ModSensitive from '../ModSensitive.vue'
import ModMainUserInfo from './ModMainUserInfo.vue'
import ModContainer from '../ModContainer.vue'

@Component({ name: 'mod-main-header', components: { ModSensitive, ModMainUserInfo, ModContainer } })
export default class ModMainHeader extends Vue {
  @Prop({ type: Number, default: 0 })
  todos: number = 1

  onClickShowBtn () {
    this.$emit('show')
  }
}
</script>
<style lang="less">
@import url(../../styles/variable.less);

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 16px 0 16px;
  margin-left: 0;
  font-size: @header-font-size;
  color: @font-color;
  height: @header-height;
  line-height: @header-height;
  background-color: @toolbar-backgroud-color;
  border: none;
  border-bottom: 1px solid @toolbar-border-color;

  .nav-toggle {
    margin: 5px 0 6px 0;
    color: @font-color;
    font-size: 18px;
    margin-left: -5px;
    padding: 10px;
    background-color: inherit;
    transition: all 0.3s;
  }

  .nav-toggle {
    float: left;
  }

  button {
    outline: none;
    border: none;
    color: inherit;
    background-color: transparent;
    cursor: pointer;

    &:hover {
      background-color: @toolbar-backgroud-color-hover;
    }
  }

  a {
    color: @font-color;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
